<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >查询条件</el-button
          >
          <el-button
            style="float: right; padding: 3px 0;color:red"
            type="text" @click="GetContractExcel()"
            >部门导出</el-button
          >
        </div>
        <div v-show="isShow1 == true">
          <tr>
            <td>生产部门：</td>
            <td>
               <el-select v-model="depname" clearable placeholder="全部" @change="GetPersonnel()">
               <el-option
                v-for="item in drop_down"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            </td>
            <td>人员：</td>
            <td>
              <el-select
                v-model="personnel"
                clearable
                placeholder="全部"
              >
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </td>
            <td>年份：</td>
            <td>
              <el-select
                v-model="year"
                clearable
                placeholder="请选择"
              >
                <el-option :label="2017" :value="2017"></el-option>
                <el-option :label="2018" :value="2018"></el-option>
                <el-option :label="2019" :value="2019"></el-option>
                <el-option :label="2020" :value="2020"></el-option>
                <el-option :label="2021" :value="2021"></el-option>
                <el-option :label="2022" :value="2022"></el-option>
              </el-select>
            </td>
            <td>
              <el-button type="primary" @click="GetAllAnnualLeaveStatisticsDto()" >查询</el-button>
            </td>
          </tr>
        </div>
      </el-card>
    </div>

    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >查询结果</el-button
          >
          <el-button
            @click="isShow2 = !isShow2"
            style="float: right; padding: 3px 0"
            type="text"
            >{{ isShow2 == true ? "收起" : "展开" }}</el-button
          >
        </div>
        <h3>{{year}}年假统计</h3>
        <div v-show="isShow2 == true">
          <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="depname"
      label="部门名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="annual_leave_id"
      label="序号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="this_year_day"
     label="今年(天) "
      width="120">
    </el-table-column>
    <el-table-column
      prop="this_year_hour"
      label="今年(小时)"
      width="120">
    </el-table-column>
    <el-table-column
      prop="last_year_hour"
      label="去年剩(小时)"
      width="120">
    </el-table-column>
      <el-table-column
      prop="one"
      label="12.16至12.31"
      width="120">
    </el-table-column>
      <el-table-column
      prop="two"
      label="1.1至1.15"
      width="120">
    </el-table-column>
      <el-table-column
      prop="three"
      label="1.16至2.15"
      width="120">
    </el-table-column>
      <el-table-column
      prop="four"
      label="2.16至2.28"
      width="120">
    </el-table-column>
    <el-table-column
      prop="five"
      label="3.1至3.15"
      width="120">
    </el-table-column>
      <el-table-column
      prop="six"
      label="3.16至4.15"
      width="120">
    </el-table-column>
      <el-table-column
      prop="seven"
      label="4.16至5.15"
      width="120">
    </el-table-column>
      <el-table-column
      prop="eight"
      label="5.16至6.15"
      width="120">
    </el-table-column>
      <el-table-column
      prop="nine"
      label="6.16至7.15"
      width="120">
    </el-table-column>
      <el-table-column
      prop="ten"
      label="7.16至8.15"
      width="120">
    </el-table-column>
      <el-table-column
      prop="eleven"
      label="8.16至9.15"
      width="120">
    </el-table-column>  <el-table-column
      prop="twelve"
      label="9.16至10.15"
      width="120">
    </el-table-column>
     <el-table-column
      prop="thirteen"
      label="10.16至11.15"
      width="120">
    </el-table-column>
     <el-table-column
      prop="fourteen"
      label="11.16至12.15"
      width="120">
    </el-table-column>
     <el-table-column
      prop="year_remaining_hour"
      label="剩余小时"
      width="120">
    </el-table-column>
   
  </el-table>  
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { GetAllDepartment,GetPersonnel,GetAllAnnualLeaveStatisticsDto ,GetContractExcel} from "./AttendanceManagementApi";
export default {
  data() {
    return {
      depname:null,
      personnel:null,
      year:2022,
       drop_down:[],
      tableData: [],
      options: [],
      isShow1: true, 
      isShow2: true, 
      searchModel: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        searchItem: {
          dictionary_name: null,
          dictionary_type: null,
        },
      },
      form: {
        dictionary_name: null,
        dictionary_type: null,
        dictionary_describe: null,
        dictionary_code: 0,
      },
    };
  },
  created() {
    this.GetAllDepartment();
    this.GetPersonnel();
    this.GetAllAnnualLeaveStatisticsDto();
  },
  methods: {
     GetAllDepartment(){
      GetAllDepartment().then((res)=>{
      this.drop_down=res.data;
      })
    },
    GetPersonnel(){
      this.options=[];
      this.personnel=null;
      GetPersonnel(this.depname).then((res)=>{
        this.options=res.data;
      })
    },
    GetAllAnnualLeaveStatisticsDto(){
      GetAllAnnualLeaveStatisticsDto(this.depname,this.personnel,this.year).then((res)=>{
        this.tableData=res.data;
      })
    },
    GetContractExcel(){
      GetContractExcel(this.depname,this.personnel,this.year).then((res)=>{    
        alert(res.data)
      })
    }
  },
};
</script>